<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        我爱我家,更爱你！
    </div>
    <div>
        我<span style="color:red">爱</span>我家,更爱你！
    </div>

    <script>
        // 高亮：把一个字符串，用另一个特殊的（具备css样式的）字符串来代替
        var str = "我爱我家,更爱你！";
        // 如何把 爱  ---替换--->  <span style="color:red">爱</span>
        console.log( str.replace("爱", '<span style="color:red">爱</span>') )
        // 简单的replace不能解决两个问题：
        // 1. 替换多个
        // 2. 替换时不区分大小写
        
        // 所以，在使用replace时，加上正则
        
        // 格式：
        // str.replace(正则表达式，函数)
        // 1. 正则表达式 用来找出要替换的目标
        // 2. 函数，用来自定义替换的内容

        // 定义一个正则有两种写法：
        //  1. 字面量  /a/gi
        //  2. 构造器  new RegExp("a", 'gi')

        // 一般直接使用字面量的方式，因为它比较简单；
        // 如果要生成的正则有变量传入的，只能选用构造器的方式

        //   var keyword = "ab"
        //   字面量:  /keyword/gi 这   不能匹配"ab"  
        //   构造器:  new RegExp(keyword, 'gi')  ok，

        var str = "abcAba"
        var keyword = "ab"
        // 目标是把 a 高亮， 且不分大小写
        // 期望结果是： 三个a都是红色
        //  <span style="color:red">a</span>bc<span style="color:red">A</span>d<span style="color:red">a</span>
        
        // /a/gi : 表示要匹配a, i表示不分大小写, g表示全局，所有匹配目标。
        // function(s){} : 它的入参是当前匹配的内容，它的返回值是要替换的结果
        // var str1 = str.replace(/a/gi, function(s){
        var str1 = str.replace(new RegExp(keyword, 'gi'), function(s){
            console.log(s)
            return `<span style="color:red">${s}</span>`
        })
        console.log(str1)
    </script>
</body>
</html>